<template>
    <el-card class="box-card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="密码重置" name="1">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <!-- <el-form-item label="姓名">
              <el-input v-model="ruleForm.displayName" disabled></el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="ruleForm.username" disabled></el-input>
            </el-form-item> -->
                    <el-form-item label="身份证号" prop="card">
                        <el-input v-model="ruleForm.card"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="新密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input type="password" v-model="ruleForm.confirmPassword" autocomplete="off"></el-input>
            </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

        </el-tabs>
        <el-dialog title="基本信息" :visible.sync="dialogVisible" width="50%">
            <el-form label-position="left">
                <el-form-item label="姓名">
                    <span>{{ userInfo.teacherName }}</span>
                </el-form-item>
                <el-form-item label="手机号">
                    <span>{{ userInfo.phone }}</span>
                </el-form-item>
                <el-form-item label="生日">
                    <span>{{ userInfo.birthday }}</span>
                </el-form-item>
                <el-form-item label="性别">
                    <span>{{ userInfo.gender==1?'男':'女' }}</span>
                </el-form-item>
                <el-form-item label="学校代码">
                    <span>{{ userInfo.schoolCode }}</span>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="password" type="password" autocomplete="off"  placeholder="请输入要重置的密码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="resetPass">确 定 重 置</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>
<script>
import api from "@/api/dispose";
export default {
    data() {

        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('confirmPassword');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validatePass3 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false,
            ruleForm: {
                displayName: "",
                username: "",
                nowPassWord: '',
                password: '',
                checkPass: '',
                card: ""
            },
            userInfo: "",
            password: "",
            activeName: '1',

            rules: {
                nowPassWord: [
                    { validator: validatePass3, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
            },
        }
    },
    mounted() {

        api.getPersonalData().then((res) => {
            if (res.code == 0) {
                this.ruleForm = res.data;
                this.ruleForm.gender = this.ruleForm.gender + "";
            }
        });
    },
    methods: {
        handleClick(tab, event) {
        },
        submitForm(formName) {


            let obj = {
                idCard: this.ruleForm.card
            }
            this.userInfo = ""
            api.queryOneTeacher(obj).then((res) => {

                if (res.code == 200) {
                    this.dialogVisible = true
                    this.userInfo = res.data.data
                } else {
                    this.$message.warning(res.data.msg);
                }
            });
        },
        resetPass() {
            if(this.password==""){
                this.$message.error("请输入密码");
                return
            }
            let obj = {
                userId: this.userInfo.teacherId,
                password: this.password
            }
            api.resetPassword(obj).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.$message.success(res.msg);
                }
            })
        }
    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    /* width: 480px; */
}

.first-div {
    background-color: white;
}
</style>